import React from "react";
import './add_record.scss'
import '../../index.scss'
import {Button, Checkbox, Collapse, Input, Select, Upload} from "antd";
import { UploadOutlined } from '@ant-design/icons';
import Radio from "antd/es/radio/radio";


function AddRecord(props){

    const {Panel} = Collapse

    const positionOptions = ['江边', '景区', '宗教寺庙', '重要商圈', '医院'];

    return(
        <div className={'component_container'}>
            <div className={'component_title'}>
                新增备案
            </div>

            <div className={'add_record_data'}>
                <Collapse bordered={false} defaultActiveKey={['1']} style={{background: 'white', width: '100%'}}>
                    <Panel header="经营管理者基本信息" key="1">
                        <div className={'add_record_data_container'}>
                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场名称
                                </div>
                                <Input placeholder={'请输入停车场名称'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    经营管理单位
                                </div>
                                <Input placeholder={'请输入经营管理单位'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    经营管理单位电话
                                </div>
                                <Input placeholder={'请输入经营管理单位电话'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    产权单位
                                </div>
                                <Input placeholder={'请输入产权单位'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    产权单位电话
                                </div>
                                <Input placeholder={'产权单位电话'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    与产权单位关系
                                </div>
                                <Select placeholder={'与产权单位关系'}>
                                    <Select.Option>
                                        关系一
                                    </Select.Option>
                                </Select>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    使用权证明材料
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    管理单位工商营业执照
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    单位授权办件委托书
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场产权单位证明
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    经办人
                                </div>
                                <Input placeholder={'请输入经办人'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    经办人手机
                                </div>
                                <Input placeholder={'请输入手机'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    是否收费
                                </div>
                                <Select placeholder={'是否收费'}>
                                    <Select.Option>
                                        是
                                    </Select.Option>
                                    <Select.Option>
                                        否
                                    </Select.Option>
                                </Select>
                            </div>
                        </div>
                    </Panel>

                    <Panel header="停车场设施-基本信息" key="2">
                        <div className={'add_record_data_container'}>
                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场名称
                                </div>
                                <Input placeholder={'请输入停车场名称'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    所在地区
                                </div>
                                <Input placeholder={'请输入所在地区'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    详细地址
                                </div>
                                <Input placeholder={'请输入详细地址'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    入口经纬度
                                </div>
                                <Input placeholder={'经度'}/>
                                <Input placeholder={'纬度'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场申请等级
                                </div>
                                <Select placeholder={'停车场申请等级'}>
                                    <Select.Option>普通</Select.Option>
                                </Select>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场类型
                                </div>
                                <Select placeholder={'停车场类型'}>
                                    <Select.Option>类型一</Select.Option>
                                </Select>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    室内外类型
                                </div>
                                <Select placeholder={'室内外类型'}>
                                    <Select.Option>室内</Select.Option>
                                    <Select.Option>室外</Select.Option>
                                </Select>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    建设工程规划竣工验收备案登记证
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    用地性质
                                </div>
                                <Select placeholder={'用地性质'}>
                                    <Select.Option>性质一</Select.Option>
                                    <Select.Option>性质二</Select.Option>
                                </Select>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    规划车位
                                </div>
                                <Input placeholder={'请输入规划车位'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场建筑规模
                                </div>
                                <Radio.Group>
                                    <Radio value={1}>特大型</Radio>
                                    <Radio value={2}>大型</Radio>
                                    <Radio value={3}>中型</Radio>
                                    <Radio value={4}>小型</Radio>
                                </Radio.Group>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    已售车位数
                                </div>
                                <Input placeholder={'请输入已售车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    对外经营车位数
                                </div>
                                <Input placeholder={'请输入对外经营车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    分层填写
                                </div>
                                <Input placeholder={'请输入分层填写'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    停车位清单
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场面积
                                </div>
                                <Input placeholder={'请输入停车场面积'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    分层填写
                                </div>
                                <Input placeholder={'请输入分层填写'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    无障碍停车位数
                                </div>
                                <Input placeholder={'请输入无障碍停车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    充电车位数
                                </div>
                                <Input placeholder={'请输入充电车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    充电车位证明材料
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    微型位数
                                </div>
                                <Input placeholder={'请输入微型车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    卸货车位数
                                </div>
                                <Input placeholder={'请输入卸货车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    机械式车位数
                                </div>
                                <Input placeholder={'请输入机械式车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    普通车位数
                                </div>
                                <Input placeholder={'请输入普通车位数'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    出入口数量
                                </div>
                                <Input placeholder={'出入口数量'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    出入口车道数量
                                </div>
                                <Input placeholder={'请输入出入口车道数量'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    位置属性
                                </div>
                                <div>
                                    <Checkbox.Group options={positionOptions}/>
                                </div>
                            </div>


                        </div>
                    </Panel>

                    <Panel header="停车场设施-附属设施" key="3">
                        <div className={'add_record_data_container'}>
                            <div className={'add_record_data_item'}>
                                <div>停车诱导系统（多选）</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>系统一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>停车场</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>通讯信号覆盖率%</div>
                                <Input placeholder={'%'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>立体停车场类型</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>消防</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>公共卫生间</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>停车管理系统</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>智能化电子收费系统</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>监控系统覆盖率</div>
                                <Input placeholder={'%'}/>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>照明设施</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>应急照明系统</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>通风系统</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>停车定位器</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>停车道路硬化</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>道闸</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>内墙及顶面是否经过饰面处理</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>标志标牌</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>现场收费公示牌</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>充电桩数量</div>
                                <div>
                                    <Select placeholder={'请选择'}>
                                        <Select.Option>停车场一</Select.Option>
                                    </Select>
                                </div>
                            </div>

                        </div>
                    </Panel>

                    <Panel header="相关附件" key="4">
                        <div className={'add_record_data_container'}>
                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场产权单位证明
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    使用权证明材料
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    管理单位工商营业执照
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    单位授权办件委托书
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    建设工程规划竣工验收备案登记证
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    交通组织图
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    停车场设施清单
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    经营服务及安全管理制度
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    管理运营维护方案
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    应急处置预案
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                            <div className={'add_record_data_item'}>
                                <div>
                                    其他
                                </div>
                                <Upload>
                                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                </Upload>
                            </div>

                        </div>
                    </Panel>
                </Collapse>
            </div>

            <div className={'add_record_panel'}>
                <Button type={'primary'}>暂存</Button>
                <Button type={'primary'}>提交</Button>
            </div>
        </div>
    )
}

export default AddRecord